<template>
  <div class="base-content">
    <!-- 公共头 -->
    <header class="header-fiexed"
            v-if="$route.meta.head && $route.meta.head.show && showHead">
      <van-nav-bar :title="$route.meta.head.title"
                   :left-arrow="$route.meta.head.showBack || false"
                   @click-left="onClickLeft" />
    </header>

    <!-- 内容 -->
    <keep-alive>
      <!-- 缓存视图 -->
      <router-view v-if="$route.meta.keepAlive"
                   ref="childView"
                   :showHead="showHead"
                   :showFooter="showFooter"></router-view>
    </keep-alive>
    <!--  非缓存视图 -->
    <router-view v-if="!$route.meta.keepAlive"
                 ref="childView"
                 :showHead="showHead"
                 :showFooter="showFooter"></router-view>

    <!-- 底部导航 -->
    <footer-nav v-if="$route.meta.footer.show && showFooter"></footer-nav>
  </div>
</template>

<script>
import FooterNav from '@/components/FooterNav'
import { mapState } from 'vuex'
import { appIncludeHtml } from '@/utils/utils'
var lastForm = ''
export default {
  name: 'MemberBase',
  data() {
    return {
      showHead: true, // 显示头部
      showFooter: true
    }
  },
  components: {
    FooterNav
  },
  computed: {
    ...mapState({
      user: state => state.user.info
    })
  },
  created: function() {
    // app 内嵌H5。初始化方法
    appIncludeHtml(this)

    if (!this.user) {
      this.$toast({
        type: 'loading',
        message: '请先登录'
      })
      // 和request配合一起退出登陆，防止重复跳转登陆界面
      window.toLoginTimeOut = setTimeout(() => {
        this.$router.push({ name: 'HomeLogin' })
      }, 2000)
    }
  },
  /**
   * 路由守卫
   */
  beforeRouteEnter(to, form, next) {
    lastForm = form.name
    next()
  },

  methods: {
    /**
     * 点击头部返回
     */
    onClickLeft() {
      let headInfo = this.$route.meta.head
      let back = headInfo.back || -1 // 默认返回上一页
      // 判断是否直接进的链接，直接进的链接的兼容
      if (back === -1 && (lastForm || window.history.length > 2)) {
        this.$router.go(back)
      } else if (back === -1 && !lastForm) {
        if (headInfo.backUrl) {
          this.$router.push({ name: headInfo.backUrl })
        } else {
          this.$router.push({ name: 'MemberIndex' })
        }
      } else {
        // back可以是子页面的方法的名称，点击的时候触发子页面方法名
        this.$refs.childView[back] && this.$refs.childView[back]()
      }
    }
  }
}
</script>

<style lang="scss">
</style>
